<template>
  <div class="_profile" :class="{ _mobile: isMobile }">
    <div class="_head-title" v-if="isMobile">Head</div>
    <div class="_head">
      <img
        :src="auth.userInfo.head_image"
        class="w-full h-full"
        style="object-fit: contain"
      />
    </div>
    <div
      class="_btn"
      :class="{ _click: !loading, _disabled: loading }"
      @click="onGenerateUserHead"
    >
      <el-icon
        size="1.25rem"
        style="color: var(--el-color-primary)"
        :class="{ 'is-loading': loading }"
      >
        <refresh-right />
      </el-icon>
      <span>Generate Random</span>
    </div>
    <div class="_label-list">
      <div class="_label-item">
        <label>UserName:</label>
        <span class="_text-ellipsis">
          {{ auth.userInfo?.username }}
        </span>
      </div>
      <div class="_label-item">
        <label>UserId:</label>
        <span>{{ auth.userInfo?.uid }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" setup>
import { RefreshRight } from "@element-plus/icons-vue";

import { generateUserHead } from "@/api/uc";
import { useMedia } from "@/hooks/useMedia";
import { useAuth } from "@/store/auth";

const auth = useAuth();
const isMobile = useMedia();

const loading = ref(false);

async function onGenerateUserHead() {
  loading.value = true;
  if (await generateUserHead()) {
    await auth.getUserInfo();
  }
  loading.value = false;
}
</script>

<style lang="less" scoped>
._profile {
  ._btn,
  ._head {
    border-radius: var(--el-border-radius-base);
    border: 0.06rem solid var(--el-border-color);
  }

  ._head {
    padding: 1.31rem;
    width: 10rem;
    aspect-ratio: 1/1;
    min-height: 0;
  }

  ._btn {
    @apply flex items-center justify-center;
    gap: 0.3rem;
    margin: 0.63rem 0 1.38rem;
    width: 10.06rem;
    aspect-ratio: 10.06 / 2.25;
    min-height: 0;
    color: #cacaca;
    font-size: 0.88rem;
    line-height: 1.25rem;
  }

  ._label-list {
    @apply flex flex-col;
    gap: 1.5rem;
    font-size: 0.88rem;
    color: #cacaca;
    ._label-item {
      @apply flex items-center;
      label {
        display: inline-block;
        color: #9d9d9d;
        width: 10.06rem;
      }
    }
  }
}

._profile {
  &._mobile {
    @apply flex flex-col items-center justify-center;
    padding: 1.69rem 4.31rem;
    ._head-title {
      margin-bottom: 1.13rem;
      font-weight: 600;
      font-size: 0.88rem;
      color: #cacaca;
    }
    ._label-list {
      @apply flex-nowrap w-full;
      gap: 1.38rem;
      ._label-item {
        label {
          width: 7rem;
        }
      }
    }
  }
}
</style>
